/*
 * @Author: Written by ChangDeLu && changyuhang991007@163.com
 * @Date: 2024-03-25 15:13:48
 * @LastEditors: Written by ChangDeLu && changyuhang991007@163.com
 * @LastEditTime: 2024-08-27 11:41:13
 * @FilePath: /blindTransit/src/Component/Sensitivity.tsx
 */
import React, { useEffect, useState } from 'react';
import type { FC } from 'react';
import { Input } from 'antd-mobile';
interface ISensitivity {
    type: 'name' | 'phone' | 'id' | string;
    msg: string,
    isInput?: boolean,
    placeholder?: string,
    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
    keys?: any,
    className?: any
    maxLength?: number
}

const Sensitivity: FC<ISensitivity> = (props) => {
	console.log(props.msg);
	const [is, setIs] = useState<boolean>(true);
	const [msg, setMsg] = useState<string>(props.msg);
	const [msgs, setMsgs] = useState<string>('');
	let placeholderDf =
		props.type === 'name'
			? '请输姓名'
			: props.type === 'id'
			? '请输入身份证号码'
			: '请输入手机号码';
	const [placeholder] = useState<string>(props.placeholder || placeholderDf);
	useEffect(() => {
		action(props.type, props.msg);
	});
	return (
		<div>
			{props.isInput ? (
				<Input
					className={props.className}
					placeholder={placeholder}
					maxLength={props.maxLength}
					value={is ? msgs : msg}
					readOnly={!props.isInput}
					onChange={(event: string) => {
						changeIpt(event);
					}}
					onBlur={() => {
						Blur();
					}}
					onFocus={() => {
						Focus();
					}}
				/>
			) : (
				<div
					className={props.className}
					onClick={() => {
						tm();
					}}>
					{is ? msgs : msg}
				</div>
			)}
		</div>
	);
	function action(type: ISensitivity['type'], msg: string) {
		if (!msg) {
			setMsgs('');
			return;
		}
		setMsg(msg)
		if (type === 'name') {
			setMsgs(name(msg));
		}
		if (type === 'id') {
			setMsgs(id(msg));
		}
		if (type === 'phone') {
			setMsgs(phone(msg));
		}
	}
	function changeIpt(e: any){
		setMsg(e);
		action(props.type, e);
		props.onChange!(e);
	}

	function Blur() {
		setIs(true);
	}
	function Focus() {
		setIs(false);
	}
	function tm() {
		setIs(!is);
	}
	function name(e: string) {
		let name = e.slice(e.length - 1, e.length);
		for (let i = 0; i < e.length - 1; i++) {
			name = '*' + name;
		}
		return name;
	}
	function id(e: string) {
		let id = e.slice(e.length - 4, e.length);
		for (let i = 0; i < e.length - 4; i++) {
			id = '*' + id;
		}
		return id;
	}
	function phone(e: string) {
		let num = e.slice(0, 3) + '****' + e.slice(e.length - 3, e.length);
		return num;
	}
};

export default Sensitivity;
